<template>
  <div class="container" v-loading="loading" element-loading-text="数据处理中，请耐心等待......" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row type="flex" justify="space-between" align="middle">

      <el-col :span="21">
        <el-row>
          <el-col>
            <el-select v-model="selectNetCode" placeholder="请选择台网码" multiple collapse-tags style="width: 150px;margin-right: 15px" @change='selectChange($event,1)'>
              <el-checkbox  style="margin-left: 20px" v-model="checkedNetCode" @change='selectAllFlag(1)'>全选</el-checkbox>
              <el-option v-for="item in netCodeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="selectStaType" placeholder="请选择台站类型" multiple collapse-tags style="width: 150px;margin-right: 15px" @change='selectChange($event,2)'>
              <el-checkbox  style="margin-left: 20px" v-model="checkedStaType" @change='selectAllFlag(2)'>全选</el-checkbox>
              <el-option v-for="item in staTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
             <el-select v-model="selectChanNum" placeholder="请选择通道号" multiple collapse-tags style="width: 150px;margin-right: 15px" @change='selectChange($event,3)'>
              <el-checkbox  style="margin-left: 20px" v-model="checkedChanNum" @change='selectAllFlag(3)'>全选</el-checkbox>
              <el-option v-for="item in ChanNumOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
              <el-select v-model="selectChanCode" placeholder="请选择通道码" multiple collapse-tags style="width: 150px;margin-right: 15px" @change='selectChange($event,4)'>
              <el-checkbox  style="margin-left: 20px" v-model="checkedChanCode" @change='selectAllFlag(4)'>全选</el-checkbox>
              <el-option v-for="item in ChanCodeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span>可用率: </span>
            <el-input placeholder="可用率阈值" v-model="doubleFilteredThreshold" multiple collapse-tags style="width: 200px" class="input-with-select">
              <el-select v-model="filteredLessThanSymbol" slot="prepend" placeholder="方式" style="width: 80px">
                <el-option label="大于" value="大于"></el-option>
                <el-option label="小于" value="小于"></el-option>
              </el-select>
            </el-input>
          </el-col>
          <el-col style="margin-top: 15px">
            <span>连续天数: </span>
            <el-input placeholder="阈值N" v-model="daysThreshold" style="width: 110px;margin-right: 15px" class="input-with-select">
            </el-input>
            <!-- <span>可用率: </span>
            <el-input placeholder="阈值T" v-model="continuousErrorTimesThreshold" style="width: 200px;margin-right: 15px" class="input-with-select setting">
              <el-select v-model="continuousErrorTimesLessThanSymbol" slot="prepend" placeholder="方式" style="width: 80px">
                <el-option label="大于" value="大于"></el-option>
                <el-option label="小于" value="小于"></el-option>
              </el-select>
            </el-input> -->
            <span>平均可用率: </span>
            <el-input placeholder="平均可用率阈值" v-model="doubleDataAvgThreshold" style="width: 220px;margin-right: 15px" class="input-with-select">
              <el-select v-model="doubleDataAvgLessThanSymbol" slot="prepend" placeholder="方式" style="width: 80px">
                <el-option label="大于" value="大于"></el-option>
                <el-option label="小于" value="小于"></el-option>
              </el-select>
            </el-input>
            <el-date-picker style="width: 400px" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-col>
        </el-row>

      </el-col>
      <el-col :span="3">
        <el-row type="flex" justify="start">
          <el-button type="success" icon="el-icon-download" style="width: 85px" @click="exportExcel">Excel</el-button>
          <el-button type="primary" icon="el-icon-download" style="width: 85px" @click="exportWord">Word</el-button>
        </el-row>
        <el-row type="flex" justify="start" style="margin-top: 10px">
          <el-button @click="queryData" type="primary" style="width: 85px" icon="el-icon-search">查询</el-button>
          <el-button style="margin-left: 10px;width: 85px" @click="clearFn" type="danger" icon="el-icon-delete">清除</el-button>
        </el-row>
      </el-col>
    </el-row>

    <el-table :data="resetTableData" style="width: 100%;margin-top:15px;" border :cell-class-name="tableCellClassName" :row-style="{height:'40px'}">
      <el-table-column :key="index" v-for="(item,index) in tableHead" :prop="item.prop" :label="item.label" align="center">
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getAvailData, getNetCode, getAllNetCode, getAllStaType, getAllChanNum, getAllChanCode, exportAvailWord } from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      tableData: [],
      pageInfo: {
        endDate: '',
        pageNum: 1,
        pageSize: 10,
        startDate: ''
      },
      date: '',
      total: 0,
      netCode: [], // 台网码数组,用于sheet命名
      loading: false,
      netCodeOptions: [],
      staTypeOptions: [],
      ChanNumOptions: [],
      ChanCodeOptions: [],
      selectNetCode: [],
      selectStaType: [],
      selectChanNum: [],
      selectChanCode: [],
      checkedNetCode: true,
      checkedStaType: true,
      checkedChanNum: false,
      checkedChanCode: false,
      filteredLessThanSymbol: '小于', // 大于-false 小于-true
      doubleDataAvgLessThanSymbol: '大于',
      continuousErrorTimesLessThanSymbol: '大于',
      doubleFilteredThreshold: 80, // 第一个阈值 时间单位为秒
      daysThreshold: 3, // 第二个阈值 N
      doubleDataAvgThreshold: 0, // 平均可用率参数
      continuousErrorTimesThreshold: 0 // 断记次数大于\大于等于 T 次 T
    }
  },
  created () {
    this.getBaseData()
    // this.getAvailData()
    this.getNetCode()
    const dateRange = this.getDefaultDate()
    this.date = [dateRange[0], dateRange[1]]
  },
  computed: {
    resetTableData () {
      // 表格数据重组
      if (this.tableData.length > 0) {
        const resetTableData = this.tableData.map(item => {
          const newObj = { ...item } // 基本信息解构进去
          item.dataList.forEach(obj => {
            // 日期：次数值 需要标色则加一个长度为1的空字符串
            const str = obj.continuousState ? ' ' : ''
            newObj[obj.date] = obj.doubleData === null ? str : obj.doubleData + str
          })
          return newObj
        })
        return resetTableData
      }
      return []
    },
    tableHead () {
      // 表头数据锁定 {label: '', width: '40', prop: 'id'},
      const tableHead = [{ label: '台网名称', prop: 'netCode' },
        { label: '台站名称', prop: 'staCode' },
        { label: '台站类型', prop: 'staType' },
        { label: '通道号', prop: 'chanNum' },
        { label: '通道代码', prop: 'chanCode' }
      ]
      if (this.tableData.length > 0) {
        this.tableData[0].dataList.forEach(item => {
          tableHead.push({
            label: item.date,
            prop: item.date
          })
        })
        tableHead.push({ label: '平均可用率', prop: 'doubleDataAvg' })
      }
      return tableHead
    }
  },
  methods: {
    selectAllFlag (flag) {
      if (flag === 1) {
        // 台网码
        if (this.checkedNetCode) {
          this.selectNetCode = this.netCodeOptions.map(item => item.value)
        } else {
          this.selectNetCode = []
        }
      } else if (flag === 2) {
        // 台站类型
        if (this.checkedStaType) {
          this.selectStaType = this.staTypeOptions.map(item => item.value)
        } else {
          this.selectStaType = []
        }
      } else if (flag === 3) {
        // 通道号
        if (this.checkedChanNum) {
          this.selectChanNum = this.ChanNumOptions.map(item => item.value)
        } else {
          this.selectChanNum = []
        }
      } else {
        // 通道码
        if (this.checkedChanCode) {
          this.selectChanCode = this.ChanCodeOptions.map(item => item.value)
        } else {
          this.selectChanCode = []
        }
      }
    },
    selectChange (selectedArray, flag) {
      const length = selectedArray.length
      if (flag === 1) {
        // 台网码
        length === this.netCodeOptions.length ? this.checkedNetCode = true : this.checkedNetCode = false
      } else if (flag === 2) {
        length === this.netCodeOptions.length ? this.checkedStaType = true : this.checkedStaType = false
      } else if (flag === 3) {
        // 通道号
        length === this.netCodeOptions.length ? this.checkedChanNum = true : this.checkedChanNum = false
      } else {
        // 通道码
        length === this.netCodeOptions.length ? this.checkedChanCode = true : this.checkedChanCode = false
      }
    },
    getDefaultDate () {
      const date = new Date()// 当前时间
      const year = date.getFullYear() // 返回指定日期的年份
      const month = this.repairDate(date.getMonth() + 1)// 月
      const day = this.repairDate(date.getDate())// 日

      // 当前时间
      const endDate = year + '-' + month + '-' + day

      const date2 = new Date(date)
      date2.setDate(date2.getDate() - 7)
      const year2 = date2.getFullYear() // 返回指定日期的年份
      const month2 = this.repairDate(date2.getMonth() + 1)// 月
      const day2 = this.repairDate(date2.getDate())// 日
      const startDate = year2 + '-' + month2 + '-' + day2
      const dateRange = [startDate, endDate]

      return dateRange
    },
    repairDate (i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    // 不限定时间，默认显示最新近七天数据,本页面需要更详细的日期+时间格式 yyyy-MM-dd HH:mm:ss，可用率只要年月日
    get7day () {
      const arr = []
      const date = new Date()
      const now = date.getTime() // 时间戳
      const oneDayTime = 60 * 60 * 24 * 1000
      // const yy = date.getFullYear()
      // const HH = (date.getHours() + '').padStart(2, '0') // 时
      // const mm = (date.getMinutes() + '').padStart(2, '0') // 分
      // const ss = (date.getSeconds() + '').padStart(2, '0') // 秒
      // 一天的秒数
      for (let i = 6; i >= 0; i--) {
        const YY = (new Date(now - i * oneDayTime).getFullYear() + '')
        const dd = (new Date(now - i * oneDayTime).getDate() + '').padStart(2, '0')
        const MM = (new Date(now - i * oneDayTime).getMonth() + 1 + '').padStart(2, '0')
        arr.push(YY + '-' + MM + '-' + dd)
      }
      console.log(arr)

      return arr
    },
    async getBaseData () {
      const { data: { data: data1 } } = await getAllNetCode()
      this.netCodeOptions = data1.map(item => ({ value: item, label: item }))
      this.selectAllFlag(1)
      const { data: { data: data2 } } = await getAllStaType()
      this.staTypeOptions = data2.map(item => ({ value: item, label: item }))
      this.selectAllFlag(2)
      const { data: { data: data3 } } = await getAllChanNum()
      this.ChanNumOptions = data3.map(item => ({ value: item, label: item }))
      this.selectChanNum = ['00', '20', '21', '30', '40', '50']
      const { data: { data: data4 } } = await getAllChanCode()
      this.ChanCodeOptions = data4.map(item => ({ value: item, label: item }))
      this.selectChanCode = ['EIZ', 'HHZ', 'HNZ', 'BHZ', 'ENZ', 'LHZ', 'EHZ']
      // console.log(this.netCodeOptions, this.chanNumOptions, this.chanCodeOptions)
    },
    async getAvailData () {
      this.loading = true
      if (!this.date) {
        this.pageInfo.startDate = this.get7day()[0]
        this.pageInfo.endDate = this.get7day()[6]
      }
      // 数据组装
      this.queryInfo = {
        ...this.pageInfo,
        netCodeList: this.selectNetCode,
        staTypeList: this.selectStaType,
        chanNumList: this.selectChanNum,
        chanCodeList: this.selectChanCode,
        doubleFilteredThreshold: this.doubleFilteredThreshold,
        filteredLessThanSymbol: this.filteredLessThanSymbol === '小于',
        doubleDataAvgThreshold: this.doubleDataAvgThreshold,
        doubleDataAvgLessThanSymbol: this.doubleDataAvgLessThanSymbol === '小于',
        daysThreshold: this.daysThreshold,
        continuousErrorTimesLessThanSymbol: this.continuousErrorTimesLessThanSymbol === '小于',
        continuousErrorTimesThreshold: this.continuousErrorTimesThreshold
      }
      const { data: { data } } = await getAvailData(this.queryInfo)
      this.tableData = data.records
      this.total = data.total
      if (data.records.length === 0) {
        this.$notify.info({
          title: '提示',
          message: '设定时间段内无错误/异常数据'
        })
      }
      console.warn(data)
      this.loading = false
    },
    async getNetCode () {
      const { data: { data } } = await getNetCode()
      this.netCode = data
    },
    handleSizeChange (newSize) {
      this.pageInfo.pageSize = newSize
      this.getAvailData()
    },
    handleCurrentChange (newNum) {
      this.pageInfo.pageNum = newNum
      this.getAvailData()
    },
    queryData () {
      if (this.date) {
        this.pageInfo.startDate = this.date[0]
        this.pageInfo.endDate = this.date[1]
      }
      this.pageInfo.pageNum = 1
      this.pageInfo.pageSize = 10
      this.getAvailData()
    },
    clearFn () {
      this.pageInfo = {
        startDate: '',
        pageNum: 1,
        pageSize: 10,
        endDate: ''
      }
      this.date = ''
      this.selectNetCode = []
      this.selectStaType = []
      this.selectChanNum = []
      this.selectChanCode = []
      this.doubleFilteredThreshold = 0
      this.daysThreshold = 1
      this.doubleDataAvgThreshold = 0
      this.continuousErrorTimesThreshold = 0
      this.getAvailData()
    },
    async exportExcel () {
      // 不指定日期，默认只导出七天的
      if (!this.date) {
        this.pageInfo.startDate = this.get7day()[0]
        this.pageInfo.endDate = this.get7day()[6]
      }
      this.$notify.info({
        title: '提示',
        message: '开始下载可用率表.xlsx文件，请稍候'
      })

      // 包裹多表数据变量定义
      const allHeader = []
      const allMerges = []
      const allData = []
      const allSheetName = []

      // 两个请求通用数据，注意获取基本信息接口传pageSize为-1拿全部数据
      const queryInfo = {
        ...this.pageInfo,
        pageSize: -1,
        netCodeList: this.selectNetCode,
        staTypeList: this.selectStaType,
        chanNumList: this.selectChanNum,
        chanCodeList: this.selectChanCode,
        doubleFilteredThreshold: this.doubleFilteredThreshold,
        filteredLessThanSymbol: this.filteredLessThanSymbol === '小于',
        doubleDataAvgThreshold: this.doubleDataAvgThreshold,
        doubleDataAvgLessThanSymbol: this.doubleDataAvgLessThanSymbol === '小于',
        daysThreshold: this.daysThreshold,
        continuousErrorTimesLessThanSymbol: this.continuousErrorTimesLessThanSymbol === '小于',
        continuousErrorTimesThreshold: this.continuousErrorTimesThreshold
      }

      // 解决forEach异步问题
      const promiseArray = []

      let netCodes = []
      if (this.selectNetCode.length === 0) {
        netCodes = this.netCode
      } else {
        netCodes.push(...this.selectNetCode)
      }
      // 说明：现在最后一个sheet还需要汇总数据，即不指定netCode
      netCodes.push('')
      // 获取数据,有多个台网的，这里先做一个的测试
      netCodes.forEach(async (netCode, index) => {
        // if (index > 0) return
        const p = new Promise((resolve, reject) => {
          // 1. 根据导出接口获取当前台网所有颜色信息
          getAvailData({ ...queryInfo, netCodeList: netCode ? [netCode] : [...netCodes] }).then(({ data: { data } }) => {
            // console.clear()
            console.log(data)
            // 表头组装-（最终是由多个台网构成的[[],[],[]])
            if (data.records.length > 0) {
              const date = data.records[0].dataList.map(item => item.date)
              const header = ['台网名称', '台站名称', '台站类型', '通道号', '通道代码', ...date, '平均可用率']
              // 数据组装,data数组有多长，说明就有几天的，也就是说有几行的数据
              const tableData = []
              data.records.forEach(item => {
                const dateRow = item.dataList.map(itemIn => {
                  const str = itemIn.continuousState ? ' ' : ''
                  return itemIn.doubleData === null ? str : itemIn.doubleData + str // '' '23 '
                }) // 日期部分对应的数据
                // 注意doubleDataAvg转换成字符串类型，方便excel导出操作
                const row = [item.netCode, item.staCode, item.staType, item.chanNum, item.chanCode, ...dateRow, item.doubleDataAvg + '']
                tableData.push(row)
              })
              allHeader.push(header)
              allMerges.push([])
              allData.push(tableData)
              allSheetName.push(netCode || '汇总') // 最后一个表叫汇总
              resolve()
            } else {
              resolve() // 某个请求没数据
              this.$message.warning('注意' + netCode + '没有数据可以导出')
            }
          })
        })

        // 收集进去promise数组
        promiseArray.push(p)
      })

      Promise.all(promiseArray).then(() => {
        import('@/utils/exportNew').then(excel => {
          excel.export_json_to_excel({
            // header: [header],
            header: allHeader,
            // data: [[['鹿琛', '12']], [['尘世', '18']]],
            // data: [tableData],
            data: allData,
            filename: '可用率表',
            autoWidth: true,
            // merges: [[]],
            merges: allMerges,
            SheetNames: allSheetName,
            bookType: 'xlsx'
          })
        })
      }).catch(() => {
        this.$message.error('导出异常')
      })
    },
    async exportWord () {
      const queryInfo = {
        endDate: this.pageInfo.endDate,
        startDate: this.pageInfo.startDate,
        daysThreshold: this.daysThreshold,
        doubleFilteredThreshold: this.doubleFilteredThreshold,
        filteredLessThanSymbol: this.filteredLessThanSymbol === '小于',
        doubleDataAvgThreshold: this.doubleDataAvgThreshold,
        doubleDataAvgLessThanSymbol: this.doubleDataAvgLessThanSymbol === '小于',
        continuousErrorTimesLessThanSymbol: false,
        continuousErrorTimesThreshold: 0
      }
      this.$notify.info({
        title: '提示',
        message: '开始下载可用率.docx文件，请稍候'
      })

      exportAvailWord(queryInfo).then(res => {
        console.log(res)
        // const blob = new Blob([res.data], { type: res.headers['content-type'] })
        // const objectUrl = URL.createObjectURL(blob)
        // window.location.href = objectUrl
        const url = window.URL.createObjectURL(new Blob([res.data], {
          type: res.headers['content-type']
        }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download = '可用率.docx'
        document.body.appendChild(link)
        link.click()
      })
    },
    async exportDefaultWord () {
      const queryInfo = {

        endDate: this.get7day()[6],
        startDate: this.get7day()[0],
        daysThreshold: 1,
        doubleFilteredThreshold: 0,
        filteredLessThanSymbol: false,
        doubleDataAvgThreshold: 0,
        doubleDataAvgLessThanSymbol: false,
        continuousErrorTimesLessThanSymbol: false,
        continuousErrorTimesThreshold: 0
      }
      const date = new Date()// 当前时间
      const year = date.getFullYear() // 返回指定日期的年份
      const month = (date.getMonth() + 1 + '').padStart(2, '0')// 月
      const day = (date.getDate() + '').padStart(2, '0')// 日
      const hour = (date.getHours() + '').padStart(2, '0')

      exportAvailWord(queryInfo).then(res => {
        console.log(res)
        const url = window.URL.createObjectURL(new Blob([res.data], {
          type: res.headers['content-type']
        }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.download = year + '-' + month + '-' + day + ' ' + hour + '时_可用率.docx'
        document.body.appendChild(link)
        link.click()
      })
    },
    async exportDefaultExcel () {
      // 包裹多表数据变量定义
      const allHeader = []
      const allMerges = []
      const allData = []
      const allSheetName = []

      // 解决forEach异步问题
      const promiseArray = []

      await this.getNetCode()
      await this.getBaseData()

      const allNetCode = []
      const allChanNum = []
      const allChanCode = []
      const allStaType = []
      this.netCodeOptions.map((item) => {
        allNetCode.push(item.value)
      })
      this.ChanNumOptions.map((item) => {
        allChanNum.push(item.value)
      })
      this.ChanCodeOptions.map((item) => {
        allChanCode.push(item.value)
      })
      this.staTypeOptions.map((item) => {
        allStaType.push(item.value)
      })

      // 两个请求通用数据，注意获取基本信息接口传pageSize为-1拿全部数据
      const queryInfo = {
        startDate: this.get7day()[0],
        endDate: this.get7day()[6],
        pageSize: -1,
        pageNum: 1,
        netCodeList: [],
        chanNumList: allChanNum,
        chanCodeList: allChanCode,
        staTypeList: allStaType,
        doubleFilteredThreshold: 0,
        filteredLessThanSymbol: false,
        doubleDataAvgThreshold: 0,
        doubleDataAvgLessThanSymbol: false,
        daysThreshold: 1,
        continuousErrorTimesLessThanSymbol: false,
        continuousErrorTimesThreshold: 0
      }

      let netCodes = []
      await this.getNetCode()
      netCodes = this.netCode
      netCodes.push('')
      // 获取数据,有多个台网的，这里先做一个的测试
      netCodes.forEach(async (netCode, index) => {
        // if (index > 0) return
        const p = new Promise((resolve, reject) => {
          // 1. 根据导出接口获取当前台网所有颜色信息
          getAvailData({ ...queryInfo, netCodeList: netCode ? [netCode] : [...netCodes] }).then(({ data: { data } }) => {
            // console.clear()
            console.log(data)
            // 表头组装-（最终是由多个台网构成的[[],[],[]])
            let date = []
            if (data.records.length > 0) {
              date = data.records[0].dataList.map(item => item.date)
            }
            const header = ['台网名称', '台站名称', '台站类型', '通道号', '通道代码', ...date, '总次数']
            // 数据组装,data数组有多长，说明就有几天的，也就是说有几行的数据
            const tableData = []
            data.records.forEach(item => {
              const dateRow = item.dataList.map(itemIn => {
                const str = itemIn.continuousState ? ' ' : ''
                return itemIn.times === null ? str : itemIn.times + str // '' '23 '
              }) // 日期部分对应的数据
              // 注意errorTimesSum转换成字符串类型，方便excel导出操作
              const row = [item.netCode, item.staCode, item.staType, item.chanNum, item.chanCode, ...dateRow, item.errorTimesSum + '']
              tableData.push(row)
            })
            allHeader.push(header)
            allMerges.push([])
            allData.push(tableData)
            allSheetName.push(netCode === '' ? '总表' : netCode)
            resolve()
          })
        })

        // 收集进去promise数组
        promiseArray.push(p)
      })

      const date = new Date()// 当前时间
      const year = date.getFullYear() // 返回指定日期的年份
      const month = (date.getMonth() + 1 + '').padStart(2, '0')// 月
      const day = (date.getDate() + '').padStart(2, '0')// 日
      const hour = (date.getHours() + '').padStart(2, '0')
      const fileName = year + '-' + month + '-' + day + ' ' + hour + '时_可用率'

      Promise.all(promiseArray).then(() => {
        import('@/utils/exportNew').then(excel => {
          excel.export_json_to_excel({
            // header: [header],
            header: allHeader,
            // data: [[['鹿琛', '12']], [['尘世', '18']]],
            // data: [tableData],
            data: allData,
            filename: fileName,
            autoWidth: true,
            // merges: [[]],
            merges: allMerges,
            SheetNames: allSheetName,
            bookType: 'xlsx'
          })
        })
      })
    },
    // 表格颜色
    tableCellClassName ({ row, column }) {
      if (column.property.includes('-')) {
        // 判断最后一位
        if (row[column.property]) {
          const str = row[column.property].substr(-1)
          if (str === ' ') return 'yellow'
        } else {
          return 'green'
        }
      }
      return 'normal'
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  // padding-top: 20px;
  height: calc(100vh - 60px);
  overflow: auto;
  /deep/ .el-table {
    .green {
      background: #00ff7f;
    }
    .red {
      background: #f56c6c;
    }
    .yellow {
      background: #ffeb9c;
    }
    .normal {
      background: #fff;
    }
  }

  /deep/ .setting > input:last-of-type {
    color: red;
    font-weight: bold;
  }
}

.page {
  margin-top: 20px;
}
</style>
